<template>
  <div class="certain">
    <header class="page-header">
      到货通知
    </header>

    <el-form :inline="true"   class="certainSearch">
      <el-form-item label="货物">
        <el-input v-model="certainSearch.goodsName" placeholder="输入货物名称"></el-input>
      </el-form-item>
      <el-form-item label="店主名">
        <el-input v-model="certainSearch.name" placeholder="输入店主名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success  " @click="certainSearchHandle">查询</el-button>
      </el-form-item>
    </el-form>



    <el-table :data="certainData" border style="width: 100%">
      <el-table-column fixed prop="needGoods" label="货物"> </el-table-column>
      <el-table-column prop="needName" label="店主名"> </el-table-column>
      <el-table-column prop="needStore" label="店名"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="certainHandle">通知到货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page-pagination"
      background
      layout="prev, pager, next"
      :page-size="1"
      :total="certainData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "certain",
  data() {
    return {
      certainSearch: {
        goodsName: "",
        name: ""
      },
      certainData: [
        {
          needGoods: "中华烟",
          needName: "陈大哥",
          needStore: "家园家居红红烧烤摊"
        }
      ]
    };
  },
  methods: {
    certainSearchHandle() {
      console.log(this.certainSearch);
    },
    certainHandle(){
      console.log('通知成功')
    }
  }
};
</script>

<style lang="scss">
.certain {
  .certainSearch {
    text-align: center;
    margin-top: 20px;
  }
}
</style>


